<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,mininum-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/找房无忧.css">
    <script src="./js/计算缩放.js"></script>
</head>

<body>

    <!-- 这是第一个盒子 -->
    <div class="top">
        <div class="top-top">
            <img src="./image/index/logo.jpg" alt="找房无忧">
            <ul class="top-top-right">
                <li class="jump">
                    <img src="./image/index/my.jpg" alt="我的">
                </li>
                <li class="jump">
                    <img src="./image/index/xiazai.jpg" alt="下载">
                </li>
            </ul>
        </div>
        <div class="banner">
            <img src="./image/index/banner.png" alt="商标" height="350px">
            <input type="text" name="" id="" placeholder="输入小区或商圈名开始找房咯！">
        </div>
        <ul class="row">
            <li class="house">
                <img src="./image/index/index_03.png" alt="">
                <p>二手房</p>
            </li>
            <li class="house">
                <img src="./image/index/index_05.png" alt="">
                <p>新房</p>
            </li>
            <li class="house">
                <img src="./image/index/index_07.png" alt="">
                <p>租房</p>
            </li>
            <li class="house">
                <img src="./image/index/index_09.png" alt="">
                <p>卖房</p>
            </li>
        </ul>
    </div>

    <!-- 这是第二个盒子 -->
    <div class="picture">
        <img src="./image/index/banner2.png" alt="">
    </div>
    <!-- 这是第三个盒子 -->
    <div class="show">
        <div class="title">
            <p class="zi">热门房源</p>
            <p class="zi">Hot house</p>
        </div>
        <ul class="display">
            <li class="nei">
                <img class="left" src="./image/index/img1.jpg" alt="">
                <div class="right">
                    <h3>文化部中间层 一层带院...</h3>
                    <p class="description">2室1厅96平方南北
                        <span class="price">110.5万</span>
                    </p>
                    <p class="description">红庙北里
                        <span>14268元/平</span>
                    </p>
                    <p>
                        <span class="nature">学区房</span>
                        <span class="nature">独家</span>
                    </p>
                </div>
            </li>
            <li class="nei">
                <img class='left' src="./image/index/img2.png" alt="">
                <div class="right">
                    <h3>光大水墨 精装复式...</h3>
                    <p class="description">2室1厅96平方南北
                        <span class="price">280万</span>
                    </p>
                    <p class="description ">光大水墨
                        <span>14268元/平</span>
                    </p>
                    <p>
                        <span class="nature ">学区房</span>
                        <span class="nature ">独家</span>
                        <span class="nature ">满五唯一</span>
                    </p>
                </div>
            </li>
            <li class="nei ">
                <img class="left " src="./image/index/img3.png " alt=" ">
                <div class="right ">
                    <h3>南北通透两居 精装修...</h3>
                    <p class="description ">2室1厅96平方南北
                        <span class="price ">320万</span>
                    </p>
                    <p class="description ">北京新天地
                        <span>14268元/平</span>
                    </p>
                    <p>
                        <span class="nature ">地铁房</span>
                        <span class="nature ">独家</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
    <!-- 这是第四个盒子  -->
    <div class="bottom ">
        <div class="bottom-top ">
            <div class="bottom-top-content ">
                <p class="text">热门关注</p>
            </div>
            <div class="bottom-top-content ">
                <p class="text">友情链接</p>
            </div>
        </div>
        <ul class="listleft ">
            <li class="link">
                <a href="# ">北京二手房</a>
            </li>
            <li class="link">
                <a href="# ">北京二手房价</a>
            </li>
            <li class="link">
                <a href=" #">海淀日租房</a>
            </li>
            <li class="link">
                <a href="# ">朝阳新房</a>
            </li>
        </ul>
        <ul class="listright ">
            <li class="link">
                <a href="# ">北京找房无忧</a>
            </li>
            <li class="link">
                <a href="# ">青年家园</a>
            </li>
            <li class="link">
                <a href=" #">免税房源</a>
            </li>

            <li class="link">
                <a href="# ">满五年唯一免税</a>
            </li>
        </ul>
        <div class="black">
            <p class="nav">
                <a href="#">北京找房无忧</a>
                <span class="dayu">&gt;</span>
                <a href="#">首页</a>
            </p>
            <ul class="device">
                <li class="click">
                    <img class="phone" src="./image/index/apple.png" alt="">
                    <div class="gray">
                        <p>iphone</p>
                        <p>客户端</p>
                    </div>

                </li>
                <li class="click">
                    <img class="phone" src="./image/index/android.png" alt="">
                    <div class="gray">
                        <p>Andriod</p>
                        <p>客户端</p>
                    </div>
                </li>
            </ul>
            <div class="descri">
                <p class="last">北京找房无忧房地产经纪有限公司</p>
                <p class="last">客服热线/虚假信息举报：400-620-6688邮箱：service@58ganji.comCopyright © 2007-2022</p>
            </div>
        </div>
    </div>
    <!-- 这是第五个盒子 -->
    <footer>
        <img class="tubiao" src="./image/index/download.png" alt="">
        <div class="ader">
            <p class="search">找房无忧</p>
            <p class="search">市场行情，一手掌握！</p>
        </div>
        <div class="onload">
            <p class="load">
                免费下载
            </p>
        </div>
    </footer>
</body>

</html>